<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item :label="t('common.time')" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          range-separator="To"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="报警编号:" prop="alarm_code">
        <el-input v-model="form.alarm_code" clearable placeholder="报警编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query" :loading="loading">{{
          t("common.queryText")
        }}</el-button>
        <el-button type="success" @click="output" :loading="downloading">{{
          t("common.export")
        }}</el-button>
      </el-form-item>
    </el-form>
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
      @command="handleAction"
    >
    </hcTable>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import useQueryTable from "@/hooks/useQueryTable";
import { useI18n } from "vue-i18n";
import dayjs from "dayjs";

let { t } = useI18n();
let form = reactive({
  time: [dayjs().subtract(7, "day").startOf("day"), dayjs().endOf("day")],
  alarm_record_id: "",
});

let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  { prop: "alarm_code", label: "报警编号", align: "center" },
  { prop: "alarm_type", label: "报警类型", align: "center" },
  { prop: "alarm_level", label: "报警等级", align: "center" },
  { prop: "alarm_context", label: "报警内容", align: "center" },
  { prop: "alarm_solution", label: "解决建议", align: "center" },
  { prop: "station_id", label: "报警工站", align: "center" },
  { prop: "start_time", label: t("common.startTime"), align: "center" },
  { prop: "end_time", label: t("common.endTime"), align: "center" },
];

let {
  list,
  query,
  output,
  addForm,
  options,
  loading,
  editOption,
  downloading,
  closeDialog,
  handleAction,
  handlerPageSize,
  handlerPageIndex,
} = useQueryTable(
  { get: "/AvpAlarmRecord/GetPageList" },
  form,
  {
    time: true,
  },
  tableColumn
);
</script>
<style lang="scss" scoped></style>
